<template>
  <div>
    <div class="servePage-model" v-if="list1.length !=0">
        <div class="model-title">初级包</div>
        <div class="servePage-model-main">
            <servePageModel v-for="(objs,index) in list1" :key="index" :obj ="objs"/>
        </div>  
    </div>
    <div class="servePage-model" v-if="list2.length !=0">
        <div class="model-title">中级包</div>
        <div class="servePage-model-main">
            <servePageModel v-for="(objs,index) in list2" :key="index" :obj ="objs"/>
        </div>  
    </div>
    <div class="servePage-model" v-if="list3.length !=0">
        <div class="model-title">高级包</div>
        <div class="servePage-model-main">
            <servePageModel v-for="(objs,index) in list3" :key="index" :obj ="objs"/>
        </div>  
    </div>
    <div class="servePage-model" v-if="list4.length !=0">
        <div class="model-title">特需定制包</div>
        <div class="servePage-model-main">
            <servePageModel v-for="(objs,index) in list4" :key="index" :obj ="objs"/>
        </div>  
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import servePageModel from './serevePageModel.vue'
export default {
    created(){
        this.pageLoad()
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    components:{
        servePageModel
    },
    methods:{
        pageLoad(){
            axios({
                url:"/data/getServePageList",
                method:"get"
            }).then(res =>{
                let arr = res.data
                for(let i=0;i<arr.length;i++){
                    console.log(arr[i]);
                    if(arr[i].serve_dj == 1){
                        console.log(arr[i]);
                        this.list1.push(arr[i])
                    }
                    if(arr[i].serve_dj == 2){
                        this.list2.push(arr[i])
                    }
                    if(arr[i].serve_dj == 3){
                        this.list3.push(arr[i])
                    }
                    if(arr[i].serve_dj == 4){
                        this.list4.push(arr[i])
                    }
                }
            })
        }
    },
    data() {
        return {
            list1:[],
            list2:[],
            list3:[],
            list4:[],
        }
    },
}
</script>

<style>
    .servePage-model{
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }
    .servePage-model-main{
        width: 100%;
        /* background: #000; */
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */

    }
    .servePage-model-dv{
        /* margin-top: 10px; */
    }
    .model-title{
        margin-bottom: 20px;
    }
</style>